<!-- <script >
// setup 组合式api
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

export default {

  beforeCreate(){
    console.log('beforeCreate')
  },

  setup(){
    console.log('setup');

    const message = 'hi666~'

    const logMessage= ()=>{
      console.log(message)
    }
    
    // return {
    //   message,
    //   logMessage
    // }
  }
}
</script>
 -->


<!-- setup 语法糖 -->
<script setup>
import { reactive , ref ,computed ,watch, onMounted } from 'vue'

import SonCon from './components/SonCon.vue';
import SonCon2 from './components/SonCon2.vue';

  const message = 'hi666~'
  const logMess= ()=>{
    // this 好处
    console.log(message)
  }

  // ----------------------------

  // reactive  & ref

  // reactive() 接收对象参数 , 返回一个响应式对象

  const state = reactive({
    msg:'hihihi~',
    userInfo:{
      name:'jack',
      age:22
    }
  })

  const setState = ()=>{
    state.msg = 'hello world'
  }


  // ref 接收 简单类型 || 对象类型 数据传入 , 也返回一个响应式对象

  const count = ref(0) // count : 0
  const name = 'dark'
  const user = ref({
    name:'rose',
    age:18
  })

  const setCount = ()=>{
    count.value++
  }

  const setUser= ()=>{
    console.log(user.value)
    user.value.name = 'dark'
  }


  // 和vue2差不多  computed 计算属性 , 只是修改了API的写法

  const doubleCount = computed(()=>{
    return count.value * 2
  })

  // 原始数据
  const list = ref([1,2,3,4,5,6,7,8,9])
  console.log('=-=-=-=-',list.value.filter(item => item > 5));

  const filterList = computed(()=>list.value.filter(item => item > 5))


  // watch 监听 单个数据 , 数据变化时 出发函数
  // 额外有两个参数 immediate(立刻执行)  deep (开启深度监听)

  // watch(count,(newValue , oldValue)=>{
  //   console.log(`count发生变化了!老值:${oldValue} , 新值 :${newValue}`);
  // })

  // 监听多个
  watch([count,name],([newCount , newName],[oldCount , oldName])=>{
    console.log(`count发生变化了!老值:${[newCount , newName]} , 新值 :${[oldCount , oldName]}`);
  },{
    // 当监听器被创建出来 就立即执行一次 , 后续数据翻生变化还可以再触发
    immediate:true,
    deep:true // 监听的对象数据,内部键值对翻生变化,也会检测得到
  })


  // 生命周期
  //          选项                                组合
  // beforeCreate/created                      setup(优先于所有)
  // beforeMount                               onBeforeMount
  // mounted                                   onMounted
  // beforeUpdate                              onBeforeUpdate
  // updated                                   onUpdated
  // beforeUnmount                             onBeforeUnmount
  // unmounted                                 onUnmounted

  // 多次执行 会全部按顺序执行到位
  onMounted(()=>{
    console.log('onMounted 1111111111111');
  })

  // const myFn = ()=>{
  //   console.log('我是myFn -----');
  //   onMounted(()=>{
  //     console.log('onMounted 222222222222222222222');
  //   })
  //   console.log('我是myFn -----');
  // }
  
  // myFn()

  // 组件通信
  // 父传子 子传父
  const getMessage = (msg)=>{
    console.log('子传父的消息 :  hahahha -->',msg);
  }


  const SonCon2Ref = ref(null)

  onMounted(()=>{
    console.log('SonCon2Ref:-=-~~~~~=' , SonCon2Ref.value.testMess);
  })
</script>
<template>
  <!--  不在要求唯一的根元素 -->
    <div class="wrapper">

      <SonCon2 ref="SonCon2Ref"/>

      <!-- ============== 父组件访问 : {{ SonCon2Ref.testMess}}  有瑕疵 -->
      <hr>
      <!-- 父传子 -->
      <SonCon ref="testMessRef" msg="这是一条父组件传给 子组件 的信息" />
      <!-- 子传父 -->
      <!-- 1. 绑定自定义事件 -->
      <SonCon @get-message="getMessage" />
      <br>
      --------------{{ message }}

      <br>

      {{ state.msg }} --- {{ state.userInfo.name }}

      <button @click="setState">点我</button>

      <br>
      {{ count }} --- {{  user.name }}  -- {{user.age}}
      <button @click="setCount">点我setCount</button>
      <button @click="setUser">点我setUser</button>

      <br>
      {{ doubleCount }} --- filterList : {{ filterList }}
        
    </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

</style>
